<template>
<div class="bg">
    <div class="container">
        <div class="mar-ver">
            <div class="antiyimg"></div>
            <h3>科研试验信息安全分析系统组件库</h3>
        </div>
        <div class="table">
            <at-row :gutter="20">
                <at-col :span="6">
                    <div class="grid-content bg-purple-deep">                      
                        <router-link to="/datepicker">日历</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-black">
                         <router-link to="/formselect">表单的下拉框</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-normal">
                        <router-link to="/breadcrumb">面包屑</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/button">按钮</router-link>
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="5">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/cascader">级联选择</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-black">
                        <router-link to="/checkbox">多选框</router-link>
                    </div>
                </at-col>
                 <at-col :span="4">
                    <div class="grid-content bg-purple">
                        <router-link to="/collapse">折叠面板</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-normal">
                        <router-link to="/dialog">弹框</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/form">表单验证</router-link>                        
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="6">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/input">输入框</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-black">
                        <router-link to="/ipinput">ip输入框</router-link>
                         
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-normal">
                        <router-link to="/layout">布局</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/pagination">分页</router-link>
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="5">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/popover">弹出框</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-black">
                        <router-link to="/radio">单选框</router-link>
                    </div>
                </at-col>
                 <at-col :span="4">
                    <div class="grid-content bg-purple">
                        <router-link to="/rightexpand">表格右侧展开</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-normal">
                        <router-link to="/search">搜索框</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/select">下拉菜单</router-link>
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="6">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/step">步骤条</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-black">
                        <router-link to="/switch">开关</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-normal">
                        <router-link to="/table">表格</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/tabs">标签页</router-link>
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="5">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/tag">tag</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-black">
                       <router-link to="/echarts">echarts图表</router-link>
                    </div>
                </at-col>
                 <at-col :span="4">
                    <div class="grid-content bg-purple">
                       <router-link to="/timeline">时间轴</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-normal">
                       <router-link to="/tooltip">文字提示</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/tree">Tree 树形控件</router-link>
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="6">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/autocomplete">自动补全</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-black">
                        <router-link to="/upload">上传</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-normal">
                        <router-link to="/transfer">穿梭框</router-link>
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <router-link to="/card">卡片</router-link>
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="5">
                    <div class="grid-content bg-purple-deep">
                        <router-link to="/tabletree">树形结构</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-black">
                       <router-link to="/treemap">矩阵树图</router-link>
                    </div>
                </at-col>
                 <at-col :span="4">
                    <div class="grid-content bg-purple">
                        <router-link to="/cardInfo">信息卡片</router-link>
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-normal">
                       
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-light">
                        
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="6">
                    <div class="grid-content bg-purple-deep">
                        
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-black">
                        
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-normal">
                        
                    </div>
                </at-col>
                <at-col :span="6">
                    <div class="grid-content bg-purple-light">
                        
                    </div>
                </at-col>
            </at-row>
            <at-row :gutter="20">
                <at-col :span="5">
                    <div class="grid-content bg-purple-deep">
                        
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-black">
                       
                    </div>
                </at-col>
                 <at-col :span="4">
                    <div class="grid-content bg-purple">
                       
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-normal">
                       
                    </div>
                </at-col>
                <at-col :span="5">
                    <div class="grid-content bg-purple-light">
                        
                    </div>
                </at-col>
            </at-row>
        </div>
    </div>
    <div class="line"></div>
</div>
</template>

<style>
body{
    width: 100%;
    height:100%;
 } 
.bg{
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    background-image:url("img/bg0001.jpg");
}
.container{
    width: 700px;
    height:500px;
    position: relative;
    left: 50%;
    top: 50%;
    margin-top: -400px;
    margin-left: -350px;
}
 /*安天图标及文字说明*/
.mar-ver .antiyimg{
    width: 67px;
    height: 83px;
    margin:0 auto;
    background-image: url("img/antiy.png");
}
.mar-ver h3{
    color: white;
    text-align: center;
}

/*表格样式*/
.table{
    margin-top: 40px;
}
.at-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
}

.at-col {
    border-radius: 4px;
}
.at-col a{
    display: block;
    margin:0 auto;
    text-align: center;
    color: white;
    line-height: 36px;
    text-decoration: none;
}
.bg-purple-deep{
    background-color: #033BC8;
}
.bg-purple-black{
    background-color: #2C50CE;
}
.bg-purple-normal{
    background-color: #4C6CCE;
}
.bg-purple-light{
    background-color: #5E88C2;
}
.bg-purple {
    background-color: #4559B4;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

/*底部线条样式*/
.line{
    width: 750px;
    height: 1px;
    position: relative;
    left: 50%;
    top:75%;
    margin-left:-375px;
    /* margin-top: 80px; */
    border-bottom: 1px solid skyblue;
}
</style>